<template>
	<view :data-theme="theme">
		<view class="PromoterRank">
			<view class="redBg">
				<view class="header">
					<view class="nav acea-row row-center-wrapper">
						<view class="item" :class="active == index ? 'font-color' : ''" v-for="(item, index) in navList" :key="index" @click="switchTap(index)">
							{{ item }}
						</view>
					</view>
					<view class="rank acea-row row-bottom row-around">
						<view class="item" v-show="Two.id">
							<view class="pictrue">
								<image :src="Two.avatar"></image>
							</view>
							<view class="name line1">{{ Two.nickname }}</view>
							<view class="num">{{ Two.spreadCount }}人</view>
						</view>
						<view class="item" v-show="One.id">
							<view class="pictrue">
								<image :src="One.avatar"></image>
							</view>
							<view class="name line1">{{ One.nickname }}</view>
							<view class="num">{{ One.spreadCount }}人</view>
						</view>
						<view class="item" v-show="Three.id">
							<view class="pictrue">
								<image :src="Three.avatar"></image>
							</view>
							<view class="name line1">{{ Three.nickname }}</view>
							<view class="num">{{ Three.spreadCount }}人</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view v-if="rankList.length">
					<view class="item acea-row row-between-wrapper" v-for="(item, index) in rankList" :key="index">
						<view class="num">{{ index + 4 }}</view>
						<view class="picTxt acea-row row-between-wrapper">
							<view class="pictrue">
								<image :src="item.avatar"></image>
							</view>
							<view class="text line1">{{ item.nickname }}</view>
						</view>
						<view class="people font-color">{{ item.spreadCount }}人</view>
					</view>
				</view>
				<view class="noCart" v-if="list.length == 0 && isShow && !loading">
					<view class="pictrue">
						<image :src="urlDomain + 'crmebimage/presets/noJilu.png'"></image>
						<view class="default_txt">暂无排行榜哦~</view>
					</view>
				</view>
			</view>
			<view class="loadingicon acea-row row-center-wrapper">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
			</view>
		</view>
	</view>
</template>

<script>
import { getRankList } from '@/api/user.js';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import { setThemeColor } from '@/utils/setTheme.js';
const app = getApp();
export default {
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			navList: ['周榜', '月榜'],
			active: 0,
			type: 'week',
			loading: false,
			loadend: false,
			rankList: [],
			Two: {},
			One: {},
			Three: {},
			theme: app.globalData.theme,
			bgColor: '#e93323',
			isShow: false,
			list: []
		};
	},
	computed: mapGetters(['isLogin']),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getRanklist();
				}
			},
			deep: true
		}
	},
	onLoad() {
		if (this.isLogin) {
			this.getRanklist();
		} else {
			toLogin();
		}
		let that = this;
		that.bgColor = setThemeColor();
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: that.bgColor
		});
	},

	methods: {
		getRanklist: function () {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			getRankList({
				type: that.type
			})
				.then((res) => {
					this.list = res.data;
					let data = res.data;
					that.One = data[0] || {};
					that.Two = data[1] || {};
					that.Three = data[2] || {};
					let list = data.filter((v, i) => {
						return i > 2;
					});
					that.$set(that, 'rankList', list);
					that.loading = false;
					that.isShow = true;
				})
				.catch((err) => {
					that.loading = false;
				});
		},

		switchTap: function (index) {
			if (this.active === index) return;
			this.active = index;
			// week
			this.type = index ? 'month' : 'week';
			this.$set(this, 'rankList', []);
			this.Two = {};
			this.One = {};
			this.Three = {};
			this.getRanklist();
		}
	},
	onReachBottom: function () {
		this.getRanklist();
	}
};
</script>

<style scoped lang="scss">
.PromoterRank .redBg {
	padding: 45rpx 0 30rpx 0;
	@include main_bg_color(theme);
}

.font_color {
	@include main_color(theme);
}

.PromoterRank .header {
	background: url('')
		no-repeat;
	width: 100%;
	height: 460rpx;
	background-size: 100% 218rpx;
	background-position: center bottom;
}

.PromoterRank .header .nav {
	width: 456rpx;
	height: 66rpx;
	border: 1px solid #fff;
	border-radius: 33rpx;
	font-size: 30rpx;
	color: #fff;
	margin: 0 auto;
}

.PromoterRank .header .nav .item {
	width: 223rpx;
	height: 100%;
	text-align: center;
	line-height: 60rpx;
}

.PromoterRank .header .nav .item.font-color {
	@include main_color(theme);
	width: 230rpx;
}

.PromoterRank .header .nav .item.font-color:nth-of-type(1) {
	background-color: #fff;
	border-radius: 33rpx 0 0 33rpx;
}

.PromoterRank .header .nav .item.font-color:nth-of-type(2) {
	background-color: #fff;
	border-radius: 0 33rpx 33rpx 0;
}

.PromoterRank .header .rank {
	padding: 0 20rpx;
	margin-top: 30rpx;
}

.PromoterRank .header .rank .item .pictrue {
	background: url('')
		no-repeat;
	background-size: 100% 100%;
	width: 136rpx;
	height: 177rpx;
	position: relative;
	margin: 0 auto;
}

.PromoterRank .header .rank .item .pictrue image {
	position: absolute;
	width: 130rpx;
	height: 130rpx;
	display: block;
	bottom: 2rpx;
	border-radius: 50%;
	left: 50%;
	margin-left: -65rpx;
}

.PromoterRank .header .rank .item:nth-of-type(2) .pictrue {
	background-image: url('');
	width: 156rpx;
	height: 205rpx;
}

.PromoterRank .header .rank .item:nth-of-type(2) .pictrue image {
	width: 150rpx;
	height: 150rpx;
	margin-left: -75rpx;
}

.PromoterRank .header .rank .item:nth-of-type(3) .pictrue {
	background-image: url('');
}

.PromoterRank .header .rank .item:nth-of-type(3) .pictrue image {
	margin-left: -64rpx;
}

.PromoterRank .header .rank .item .name {
	font-size: 30rpx;
	color: #fff;
	margin-top: 22rpx;
	text-align: center;
	width: 170rpx;
}

.PromoterRank .header .rank .item .num {
	font-size: 30rpx;
	color: #fff;
	text-align: center;
}

.PromoterRank .list {
	width: 710rpx;
	background-color: #fff;
	border-radius: 20rpx;
	margin: -60rpx auto 0 auto;
	padding: 0 30rpx;
}

.PromoterRank .list .item {
	border-bottom: 1px solid #f3f3f3;
	height: 101rpx;
	font-size: 28rpx;
}

.PromoterRank .list .item .num {
	color: #666;
	width: 70rpx;
}

.PromoterRank .list .item .picTxt {
	width: 350rpx;
}

.PromoterRank .list .item .picTxt .pictrue {
	width: 68rpx;
	height: 68rpx;
}

.PromoterRank .list .item .picTxt .pictrue image {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
}

.PromoterRank .list .item .picTxt .text {
	width: 262rpx;
	color: #333;
}

.PromoterRank .list .item .people {
	width: 175rpx;
	text-align: right;
}
.noCart {
	margin-top: -62rpx;
	padding-top: 0.1rpx;
	height: 800rpx;
}

.noCart .pictrue {
	width: 414rpx;
	height: 336rpx;
	margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
	width: 100%;
	height: 100%;
}
.default_txt {
	font-size: 26rpx;
	color: #999;
	text-align: center;
}
</style>
